<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript"  xmlns:th="http://www.thymeleaf.org" charset="utf-8" th:inline="javascript"></script>
    <title>个人主页</title>
    <style>
        body{
            background-image:url("https://img.17sucai.com/upload/55/2013-05-18/884aa4be28287056c7b5d6d075382c51.jpg?x-oss-process=style/big");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="App">
        <a href="/index" style="position: fixed;left: 50px;top: 10px;">返回主页</a>
        <div class="header">
            <div class="row"><img class="img-circle img-responsive header_img" src="https://img.zcool.cn/community/01c8c45c1ccbd7a8012029ac24fe9e.jpg@1280w_1l_2o_100sh.jpg"></div>
            <div class="row">
                <div class="row">
                    <div class="col-xs-12">
                        <span class="nick_name" th:text="${user.username} ? ${user.username} : '未登录'">
                        </span></div>
                </div>
                <div class="row">
                    <div class="col-xs-12" style="text-align: center;">
                        <button class="btn btn-default btn-circle" style="margin-bottom: 2px"
                                th:if="${isAttention} eq '1'"
                                th:onclick="'javascript:cancelAttention('+${user.getId()}+')'"><i class="glyphicon glyphicon-ok"></i></button>
                        <button class="btn btn-danger btn-circle" style="margin-bottom: 2px"
                                th:if="(${isAttention} eq '0') or (!${isAttention})"
                                th:onclick="'javascript:Attention('+${user.getId()}+')'"><i class="glyphicon glyphicon-heart"></i></button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6"><span class="attention"
                                                th:text="${user.follow} ? '关注'+${user.follow} : '关注0'"></span></div><span class="line-v"></span>
                    <div class="col-xs-6" style="border-left: 1px solid #fff;"><span class="fans" th:text="${user.fans} ? '粉丝'+${user.fans} : '粉丝0'"></span></div>
                </div>
            </div>
        </div>
        <input type="hidden" th:value="${isLogin}" id="data">
        <div class="container-fluid xianyu row">
            <div th:each="xianyu:${xianyus}" class="container xianyu_item">
                <div class="row">
                    <div class="col-xs-1"><img style="margin-top: 10px" class="img-responsive img-circle avatar" alt="avatar" src="https://img.zcool.cn/community/01c8c45c1ccbd7a8012029ac24fe9e.jpg@1280w_1l_2o_100sh.jpg"></div>
                    <div class="col-xs-10 avatar_right">
                        <div class="row avatar_right_top" th:text="${xianyu.username}"></div>
                        <div class="row avatar_right_bottom"><small th:text="${xianyu.dateString}"></small>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-1">
                    </div>
                    <div class="col-xs-10">
                        <div class="article" th:text="${xianyu.content}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-1">
                    </div>
                    <div class="col-xs-10">
                        <img th:src="${xianyu.url}" onerror="this.style.display='none'" style="object-fit: scale-down; width: 200px; height: 200px">
                    </div>
                </div>
                <div class="row bottom">
                    <div class="col-xs-4 bottom_item">
                        <div class="col-xs-6"><img class="img-responsive" src=""></div>
                        <div class="col-xs-6"><span>转发</span></div>
                    </div>
                    <div class="col-xs-4 bottom_item" id="comment" style="cursor:pointer" >
                        <div class="col-xs-6"><img class="img-responsive" src=""></div>
                        <div class="col-xs-6"><span th:text="${xianyu.commentNum}"></span></div>
                    </div>
                    <div class="col-xs-2 bottom_item"
                         th:onclick="'javascript:like('+${xianyu.getId()}+')'" style="cursor:pointer">
                        <div class="col-xs-6"><img class="img-responsive" src=""></div>
                        <div class="col-xs-6"><span th:text="${xianyu.likeNum}"></span></div>
                    </div>
                    <div class="col-xs-2 bottom_item"
                         th:onclick="'javascript:like('+${xianyu.getId()}+')'" style="cursor:pointer">
                        <a th:type="button" class="btn btn-xs btn-success" href="/deleteXianyu?id=1"
                           th:href="@{/deleteXianyu(id=${xianyu.id})}">下架</a>
                    </div>

                </div>
                <div th:each="comment:${xianyu.getComments()}" class="row comment1">
                    <div class="col-xs-1"><img class="img-circle avatar" alt="avatar" style="height: 30px;width: 30px" src="https://img.zcool.cn/community/01c8c45c1ccbd7a8012029ac24fe9e.jpg@1280w_1l_2o_100sh.jpg"></div>
                    <div class="col-xs-10">
                        <div class="row comment_title" th:text="${comment.username}"></div>
                        <div class="comment_text" th:text="${comment.content}">
                        </div>
                    </div>
                </div>

                <textarea class="textarea" placeholder="聊一聊" style="margin-top: 30px" th:id="'comment_content'+${xianyu.getId()}"}> </textarea>
                <button class="btn btn btn-default btn-sm"
                        style="margin-top: -30px;background-color: #11a3fc" th:onclick="'javascript:releaseComment('+${xianyu.getId()}+')'">聊一聊</button>

            </div>
        </div>
    </div>
</div>

</body>
</html>

<script>
    function releaseComment(id){
        var disabled=$("#data").val() ? false : true
        if(disabled==true) {
            alert("请先登录！")
        }
        else {
            var content=$("#comment_content"+id).val()
            $.ajax({
                url: "/my/addComment",
                type: "POST",
                data: {
                    "id":id,
                    "content":content
                },
                success: function (result) {
                    console.log(result);
                    if (result=="success"){
                        window.location.reload();
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("错误！");
                }
            })
        }
    }
    function like(id){
        var disabled=$("#data").val() ? false : true
        if(disabled==true){
            alert("请先登录！")
        }else{
            $.ajax({
                url: "/my/like",
                type: "POST",
                data: {
                    "xianyuId":id
                },
                success: function (result) {
                    console.log(result);
                    if (result==="success"){
                        window.location.reload();
                    }
                    else if(result ==="error"){
                        alert("错误")
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("错误");
                }
            })
        }
    }
    function Attention(id){
        $.ajax({
            url: "/my/follow",
            type: "POST",
            data: {
                "followId":id
            },
            success: function (result){
                if (result === "success"){
                    window.location.reload();
                }
                else if(result === "error"){
                    alert("关注失败")
                }
                else if(result === "self"){
                    alert("不能关注自己")
                }
            },
            error: function (jqXHR, textStatus, errorThrown){
                alert("错误")
            }
        })
    }
    function cancelAttention(id){
        $.ajax({
            url: "/my/cancelFollow",
            type: "POST",
            data: {
                "followId":id
            },
            success: function (result){
                if (result === "success"){
                    window.location.reload();
                }
                else if(result === "error"){
                    alert("错误")
                }
            },
            error: function (jqXHR, textStatus, errorThrown){
                alert("错误")
            }
        })
    }
</script>


<style>
    *, :after, :before {
        box-sizing: border-box;
    }
    body {
        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
    }
    body{
        margin: 0;
        padding: 0;
    }
    .App {
        background-color: #ececec;
    }
    .header {
        width: 100%;
        box-shadow: 0 1px 1px grey;
        background: url(https://img.17sucai.com/upload/55/2013-05-18/884aa4be28287056c7b5d6d075382c51.jpg?x-oss-process=style/big);
        background-size: cover;
        color: #fff;
        font-size: .8em;
    }
    .header_img {
        display: block;
        width: 5em;
        height: 5em;
        margin: 1em auto;
        border: 3px solid #fff;
        border-radius: 5em;
        background-color: red;
    }
    .nick_name {
        text-align: center;
        display: block;
        font-size: 1.3em;
    }
    .attention, .fans {
        display: block;
        font-size: 1.1em;
    }
    .textarea{
        width: 80%;
        height: 40px;
        border: 1px solid #e6e6e6;
        margin-left: 10%;
    }
    .attention {
        text-align: right;
        padding-right: .8em!important;
    }
    .fans {
        text-align: left;
        padding-left: .8em!important;
    }
    .xianyu{
        margin-top: 1em;
        border-top: 1px solid #e6e6e6;
        background-color: #ececec;
        padding: 0px;
        height: 100vh;
    }
    .xianyu_item{
        margin-top: 2em;
        background-color: #fff;
        border-bottom: 1px solid #e6e6e6;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .article{
        padding: 0 4% 1em!important;
        text-align: left!important;
    }
    .bottom{
        height: 3em;
        line-height: 3em;
        border-top: 1px solid #e6e6e6;
        color: #919191;
    }
    .bottom_item{
        text-align: left;
        display: inline-block;
    }

    .bottom_item img{
        width: 1.5em;
        height: 1.5em;
        margin-top: .75em;
        margin-bottom: .75em;
        display: inline;
        float: right;
        margin-right: .5em;
    }
    .avatar_right .row{
        padding-left: .8em!important;
        height: 1.8em;
        line-height: 1.8em;
        text-align: left!important;
    }
    .avatar_right_top{
        margin-top: .5em;
        color: #d74303;
        font-weight: 900;
        font-size: 1.1em;
    }
    .avatar_right_bottom{
        color: #818181;
        margin-bottom: .5em;
        font-weight: 600;
        font-size: 1em;
    }
    .comment1{
        margin-left: 30px;
        margin-top: 10px;
    }
    .comment_title{
        font-weight: 900;
        font-size: 0.6em;
    }
    .btn:focus,.btn:active:focus,
    .btn.active:focus,.btn.focus,
    .btn:active.focus,.btn.active.focus {
        outline: none;
        border-color: transparent;
        box-shadow:none;
    }
    .btn-circle {
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.428571429;
        border-radius: 15px;
    }
</style>
